<template>
  <div class="cmt-container">
    <h3>发表评论</h3>
    <br>
    <textarea placeholder="请输入内容（不超过20字）" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postComments">发表评论</mt-button>
      <div class="cmt-list">
        <div class="cmt-item" v-for="(item, i) in comments" :key="item.add_time">
          <div class="cmt-title">
            第{{ i+1 }}楼&nbsp;;&nbsp;用户：{{ item.user_name }}&nbsp;;&nbsp;发表时间：{{ item.add_time | dateFormat }}
          </div>
          <div class="cmt-body">
           {{ item.content ==='undefined'? '此用户很懒，什么也没留下': item.content }}
          </div>
        </div>
      </div>
    <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
  </div>
</template>

<script>
import qs from 'qs'
import { Toast } from 'mint-ui'
export default {
  name: 'comment',
  data(){
    return {
      pageIndex: 1,
      comments: [],
      msg: '' // 评论输入的内容
    }
  },
  props: ['id'],
  created() {
    this.getComment()
  },
  methods:{
    getComment() { // 获取评论
      this.$axios.get('http://www.escook.cn:3000/api/getcomments/' + this.id + '?pageindex=' + this.pageIndex)
      .then(res=>{
        console.dir(res.data.message)
        // 每当获取新评论数据时，调用数组的concat方法拼接旧数据
        this.comments = this.comments.concat(res.data.message)
      })
      .catch(err=>{
        console.log('获取评论失败' + err)
      })
    },
    getMore() { // 加载更多
      this.pageIndex ++
      this.getComment()
    },
    postComments(){
      // 发表评论
      // 校验内容是否为空
      if(this.msg.trim().length === 0){
         return Toast('评论内容不能为空！')
      }
      // 参数1： 请求的地址URL
      // 参数2： 提交给服务器的数据对象{ content： this.msg }
      // 参数3： 定义提交数据以表单数据的格式 application/x-www-form-urlencoded
      this.$axios.post('http://www.escook.cn:3000/api/postcomment/' + this.$route.params.id, qs.stringify({content: this.msg.trim()             //qs 将对象序列化，多个对象间用&链接，服务器接口接受的数据格式是form表单形式
      }))
      .then( res=>{
        var cmt = {
          user_name: '匿名用户',
          add_time: Date.now(),
          content: this.msg.trim()
        };
        this.comments.unshift(cmt);
        this.msg = ''
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cmt-container {
  h3 {
    font-size: 18px;
  }
  textarea {
    font-size: 14px;
    height: 85px;
    margin: 0;
  }
  .cmt-list {
    margin: 5px 0;
    .cmt-item{
      font-size: 13px;
      .cmt-title {
        background: #ccc;
        line-height: 30px;
    }
      .cmt-body {
        text-indent: 2em;
      }
    }
  }
}
</style>

